<template>
    <div class="app-container full-height">
      <el-row class="full-height" :gutter="20">
        <!-- 左边区域 -->
        <el-col :span="8" class="left-panel full-height">
          <el-card shadow="hover" class="full-height">
            <div class="left-content full-height">
              <!-- 数据源选择 -->
              <el-form label-position="top" label-width="100px">
                <el-form-item label="选择数据源">
                  <el-select v-model="selectedDataSource" placeholder="请选择数据源" style="width: 100%">
                    <el-option
                      v-for="source in dataSourceOptions"
                      :key="source.value"
                      :label="source.label"
                      :value="source.value"
                      @click="handleDataSourceChange"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
  
              <!-- 表格列表 -->
              <el-table
                :data="tableList"
                border
                highlight-current-row
                @current-change="handleTableSelect"
                style="width: 100%; flex: 1; overflow: hidden;"
                height="calc(100vh - 260px)" >
                <el-table-column prop="tableName" label="表名" align="center"></el-table-column>
                <el-table-column prop="tableComment" label="备注" align="center"></el-table-column>
              </el-table>
  
              <!-- 分页 -->
              <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
                small
              />
            </div>
          </el-card>
        </el-col>
  
        <!-- 右边字段信息 + 数据信息 -->
        <el-col :span="16" class="right-panel full-height">
          <el-card shadow="hover" class="full-height">
            <el-tabs v-model="activeTab" type="card" class="full-height tab-container">
              <!-- 字段信息 Tab -->
              <el-tab-pane label="字段信息" name="fields">
                <div class="search-bar">
                  <el-input v-model="fieldSearch" placeholder="请输入字段名进行搜索" style="width: 300px;" />
                </div>
                <el-table
                  :data="filteredFieldList"
                  border
                  style="width: 100%; flex: 1; overflow: hidden;"
                  height="calc(100% - 90px)"
                >
                  <el-table-column prop="columnName" label="列名" align="center"></el-table-column>
                  <el-table-column prop="dataType" label="类型" align="center"></el-table-column>
                  <el-table-column prop="columnLength" label="长度" align="center"></el-table-column>
                  <el-table-column prop="isPrimaryKey" label="是否主键" align="center"></el-table-column>
                  <el-table-column prop="columnComment" label="描述" align="center"></el-table-column>
                  <el-table-column prop="fieldDesc" label="字段说明" align="center"></el-table-column>
                </el-table>
  
                <!-- 分页 -->
                <pagination
                  v-show="fieldTotal1 > 0"
                  :total="fieldTotal1"
                  v-model:page="fieldQuery.pageNum"
                  v-model:limit="fieldQuery.pageSize"
                  @pagination="handleFieldPagination"
                  small
                />
              </el-tab-pane>
  
              <!-- 数据信息 Tab -->
              <el-tab-pane label="数据信息" name="data">
                <el-table
                  :data="tableDataList"
                  border
                  style="width: 100%; flex: 1; overflow: hidden;"
                  height="calc(100vh - 200px)"
                >
                  <!-- 动态列渲染 -->
                  <el-table-column
                    v-for="col in dynamicColumns"
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label"
                    align="center"
                  />
                </el-table>
  
                <!-- 分页 -->
                <pagination
                  v-show="tableDataTotal > 0"
                  :total="tableDataTotal"
                  v-model:page="dataQuery.pageNum"
                  v-model:limit="dataQuery.pageSize"
                  @pagination="handleDataPagination"
                  small
                />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup name="DataSourceTables">
  import { ref, reactive, computed } from 'vue'
  const dynamicColumns = ref([])
  const activeTab = ref('fields') // 默认激活字段信息 tab
  
  // 数据源相关
  const selectedDataSource = ref('')
  const dataSourceOptions = ref([
    { label: 'MySQL-Production', value: 'mysql-prod' },
    { label: 'PostgreSQL-Test', value: 'pg-test' },
    { label: 'Oracle-Dev', value: 'oracle-dev' }
  ])
  
  // 表格列表
  const tableList = ref([])
  const total = ref(0)
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10
  })
  
  // 字段信息
  const fieldList = ref([])
  const fieldSearch = ref('')
  const fieldQuery = reactive({
    pageNum: 1,
    pageSize: 10
  })
  const fieldTotal1 = ref(0)
  
  // 表数据信息
  const tableDataList = ref([])
  const tableDataTotal = ref(0)
  const dataQuery = reactive({
    pageNum: 1,
    pageSize: 10
  })
  
  // 模拟数据源下的表
  const mockTableData = {
    'mysql-prod': [
      { tableName: 'user', tableComment: '用户表' },
      { tableName: 'order', tableComment: '订单表' },
      { tableName: 'product', tableComment: '产品表' }
    ],
    'pg-test': [
      { tableName: 'employee', tableComment: '员工表' },
      { tableName: 'department', tableComment: '部门表' }
    ],
    'oracle-dev': [
      { tableName: 'customer', tableComment: '客户表' },
      { tableName: 'address', tableComment: '地址表' }
    ]
  }
  
  // 模拟字段信息
  const mockFieldData = {
    user: [
      { columnName: 'id', dataType: 'int', columnLength: '-', isPrimaryKey: '是', columnComment: '主键ID' },
      { columnName: 'username', dataType: 'varchar', columnLength: '255', isPrimaryKey: '否', columnComment: '用户名' },
      { columnName: 'age', dataType: 'int', columnLength: '-', isPrimaryKey: '否', columnComment: '年龄' }
    ],
    order: [
      { columnName: 'orderId', dataType: 'int', columnLength: '-', isPrimaryKey: '是', columnComment: '订单ID' },
      { columnName: 'userId', dataType: 'int', columnLength: '-', isPrimaryKey: '否', columnComment: '用户ID' }
    ],
    product: [
      { columnName: 'productId', dataType: 'int', columnLength: '-', isPrimaryKey: '是', columnComment: '商品ID' },
      { columnName: 'productName', dataType: 'varchar', columnLength: '100', isPrimaryKey: '否', columnComment: '商品名称' }
    ],
    employee: [
      { columnName: 'employee_id', dataType: 'int', columnLength: '-', isPrimaryKey: '是', columnComment: '员工ID' },
      { columnName: 'name', dataType: 'varchar', columnLength: '100', isPrimaryKey: '否', columnComment: '姓名' },
      { columnName: 'gender', dataType: 'char', columnLength: '1', isPrimaryKey: '否', columnComment: '性别' },
      { columnName: 'age', dataType: 'int', columnLength: '-', isPrimaryKey: '否', columnComment: '年龄' },
      { columnName: 'department_id', dataType: 'int', columnLength: '-', isPrimaryKey: '否', columnComment: '部门ID' },
      { columnName: 'hire_date', dataType: 'date', columnLength: '-', isPrimaryKey: '否', columnComment: '入职日期' }
    ],
    department: [
      { columnName: 'department_id', dataType: 'int', columnLength: '-', isPrimaryKey: '是', columnComment: '部门ID' },
      { columnName: 'department_name', dataType: 'varchar', columnLength: '100', isPrimaryKey: '否', columnComment: '部门名称' },
      { columnName: 'manager_id', dataType: 'int', columnLength: '-', isPrimaryKey: '否', columnComment: '主管ID' },
      { columnName: 'location', dataType: 'varchar', columnLength: '255', isPrimaryKey: '否', columnComment: '位置' }
    ],
    customer: [
      { columnName: 'customer_id', dataType: 'number', columnLength: '10', isPrimaryKey: '是', columnComment: '客户ID' },
      { columnName: 'customer_name', dataType: 'varchar2', columnLength: '100', isPrimaryKey: '否', columnComment: '客户名称' },
      { columnName: 'contact', dataType: 'varchar2', columnLength: '50', isPrimaryKey: '否', columnComment: '联系方式' },
      { columnName: 'address', dataType: 'varchar2', columnLength: '255', isPrimaryKey: '否', columnComment: '地址' },
      { columnName: 'created_at', dataType: 'date', columnLength: '-', isPrimaryKey: '否', columnComment: '创建时间' }
    ],
    address: [
      { columnName: 'address_id', dataType: 'number', columnLength: '10', isPrimaryKey: '是', columnComment: '地址ID' },
      { columnName: 'customer_id', dataType: 'number', columnLength: '10', isPrimaryKey: '否', columnComment: '客户ID' },
      { columnName: 'street', dataType: 'varchar2', columnLength: '150', isPrimaryKey: '否', columnComment: '街道' },
      { columnName: 'city', dataType: 'varchar2', columnLength: '100', isPrimaryKey: '否', columnComment: '城市' },
      { columnName: 'province', dataType: 'varchar2', columnLength: '100', isPrimaryKey: '否', columnComment: '省份' },
      { columnName: 'postal_code', dataType: 'varchar2', columnLength: '20', isPrimaryKey: '否', columnComment: '邮政编码' }
    ]
  }
  
  // 模拟表数据
  const mockTableDataContent = {
    user: Array.from({ length: 50 }, (_, i) => ({
      id: i + 1,
      name: '用户' + (i + 1),
      age: Math.floor(Math.random() * 30 + 20)
    })),
    order: Array.from({ length: 50 }, (_, i) => ({
      orderId: i + 1,
      userId: Math.floor(Math.random() * 100 + 1)
    }))
  }
  
  // 过滤后的字段信息
  const filteredFieldList = computed(() => {
    let list = fieldList.value
    if (fieldSearch.value) {
      const keyword = fieldSearch.value.toLowerCase()
      list = list.filter(item =>
        item.columnName.toLowerCase().includes(keyword) ||
        item.columnComment?.toLowerCase().includes(keyword)
      )
    }
    return list.slice(
      (fieldQuery.pageNum - 1) * fieldQuery.pageSize,
      fieldQuery.pageNum * fieldQuery.pageSize
    )
  })
  
  const fieldTotal = computed(() => fieldList.value.length)
  
  function handleDataSourceChange() {
    const tables = mockTableData[selectedDataSource.value] || []
    tableList.value = tables
    total.value = tables.length
  }
  
  function handleTableSelect(row) {
  if (row && row.tableName) {
    const fields = mockFieldData[row.tableName] || []

    // 设置字段信息 + 字段说明
    fieldList.value = fields.map(f => ({ ...f, fieldDesc: f.columnComment + '说明' }))

    // 设置动态列
    dynamicColumns.value = fields.map(f => ({
      prop: f.columnName,
      label: f.columnComment
    }))

    // 设置表数据
    tableDataList.value = mockTableDataContent[row.tableName] || []
    tableDataTotal.value = tableDataList.value.length
  } else {
    fieldList.value = []
    tableDataList.value = []
    dynamicColumns.value = []
  }
}
  
  function handleFieldPagination() {}
  function handleDataPagination() {}
  
  function getList() {
    handleDataSourceChange()
  }
  
  getList()
  </script>
  
  <style scoped>
.app-container {
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.full-height {
  height: 100%;
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
}

.left-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow-y: auto;
}

.search-bar {
  margin-bottom: 10px;
}

/* 表格撑满 */
.el-table {
  flex: 1;
  overflow: hidden;
}
</style>